<template>
  <a-row class="host-metrics" :gutter="8">
    <a-col :span="12">
      <a-card title="24小时-访问设备-TOP10" :bordered="false" class="qn-card">
        <div ref="containerSystem" style="height: 300px"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card title="24小时-浏览器-TOP10" :bordered="false" class="qn-card">
        <div ref="containerBrowser" style="height: 300px"></div> </a-card
    ></a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { Chart } from '@antv/g2'
import { type UserAgentMetricsParams } from '@/api/home/model/userAgent'
import { getBrowserNameStatisticsList, getSystemNameStatisticsList } from '@/api/home/userAgent'

let params: UserAgentMetricsParams = {
  type: 3,
  metrics: 1,
  startTime: '2012-10-10 00:00:00',
  endTime: '2212-10-10 00:00:00'
}
let chartSystem
let chartBrowser
const containerSystem = ref(null)
const containerBrowser = ref(null)
onMounted(() => {
  chartSystem = renderBarSystemChart(containerSystem.value)
  chartBrowser = renderBarBrowserChart(containerBrowser.value)
})

async function renderBarSystemChart(container: any) {
  let items = await getSystemNameStatisticsList(params)
  const chart = new Chart({
    container: container,
    autoFit: true
  })

  chart.coordinate({ type: 'theta', outerRadius: 0.8 })

  chart
    .interval()
    .data(items)
    .transform({ type: 'stackY' })
    .encode('y', 'metrics')
    .encode('color', 'item')
    .legend(false)
    .label({
      position: 'outside',
      text: (data:any) => `${data.item}:数量${data.metrics}`
    })
    .tooltip((data) => ({
      name: data.item,
      value: `数量${data.metrics}`
    }))

  chart.render()
}
async function renderBarBrowserChart(container: any) {
  let items = await getBrowserNameStatisticsList(params)
  const chart = new Chart({
    container: container,
    autoFit: true
  })
  chart.coordinate({ type: 'theta', outerRadius: 0.8 })
  chart
    .interval()
    .data(items)
    .transform({ type: 'stackY' })
    .encode('y', 'metrics')
    .encode('color', 'item')
    .legend(false)
    .label({
      position: 'outside',
      text: (data:any) => `${data.item}:数量${data.metrics}`
    })
    .tooltip((data) => ({
      name: data.item,
      value: `数量${data.metrics}`
    }))

  chart.render()
}
</script>
